<template>
  <!-- 空登陆页 -->
  <s-layout title="忘记密码" :bgStyle="template.style?.background"
            :navbarStyle="template.style?.navbar">
    <view class="lg-content">
      <view class="lg-content-form">
        <view v-for="item in form" class="lg-content-form-item">
          <view class="title">{{ item.title }}</view>
          <view class="lg-content-form-item-c">
            <uni-easyinput
              :type="item.prop=='password'||item.prop=='confirm_password'?'password':''"
              v-model.sync="state.model[item.prop]" :style="item.style" :placeholder="item.placeholder"
              :placeholderStyle="item.placeholderStyle" :inputBorder="item.border">
              <template v-slot:right>
                <button
                  v-if="item.codeSlot"
                  class="ss-reset-button code-btn code-btn-start"
                  :disabled="state.isMobileEnd"
                  :class="{ 'code-btn-end': state.isMobileEnd }"
                  @tap="getSmsCode('resetPassword', state.model.mobile, state.model.captcha)"
                >
                  {{ getSmsTimer('resetPassword') }}
                </button>
                <button @tap="updateImageCode" v-if="item.imgSlot" class="ss-reset-button img-btn">
                  <image :src="imgUrl" ></image>
                </button>
              </template>
            </uni-easyinput>
          </view>
        </view>
        <view @click="handleComfirm" class="lg-content-form-btn">确定</view>
      </view>
    </view>
    <popup-tips :show="state.showTips"
                @buy="onBuy" @change="onBuyChange" @close="onClose" />
  </s-layout>

</template>

<script setup>
  import { computed, reactive, ref } from 'vue';
  import sheep from '@/sheep';
  import popupTips from './components/popup-tips.vue';
  import { getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
  import { onLoad } from '@dcloudio/uni-app';
  import { baseUrl } from '@/sheep/config';

  const template = computed(() => sheep.$store('app').template?.home);
  onLoad(() => {
    getImg();
  });
  // 图片验证码
  const updateImageCode = () => {
    getImg();
  };
  const imgUrl = ref('');
  const getImg = async () => {
   let url = baseUrl + `/addons/shopro/index/captcha` + '?time=' + new Date().getTime();
    imgUrl.value = url;
  };
  const state = reactive({
    isMobileEnd: false,
    showTips: false,
    model: {
      scene: 'reset',
      mobile: '',
      captcha: '',
      password: '',
      confirm_password: '',
      code: '',
    },
  });


  const form = ref([{
    prop: 'mobile',
    border: false,
    title: '请输入手机号',
    placeholder: '请输入手机号',
    style: {
      'color': '#FFF',
    },
    placeholderStyle: {
      'color': '#606060',
      'font-size': '28rpx',
    },
  },
    {
      prop: 'captcha',
      border: false,
      title: '图片验证码',
      placeholder: '请输入图片验证码',
      style: {
        'color': '#FFF',
      },
      placeholderStyle: {
        'color': '#606060',
        'font-size': '28rpx',
      },
      imgSlot: true,
    },
    {
      prop: 'code',
      border: false,
      title: '请输入验证码',
      placeholder: '请输入验证码',
      style: {
        'color': '#FFF',
      },
      placeholderStyle: {
        'color': '#606060',
        'font-size': '28rpx',
      },
      codeSlot: true,
    },
    {
      prop: 'password',
      border: false,
      title: '请输入密码',
      placeholder: '密码长度为6-16位且同时包含字母，区分大小写',
      style: {
        'color': '#FFF',
      },
      placeholderStyle: {
        'color': '#606060',
        'font-size': '28rpx',
      },
    },
    {
      prop: 'confirm_password',
      border: false,
      title: '请再次输入密码',
      placeholder: '密码长度为6-16位且同时包含字母，区分大小写',
      style: {
        'color': '#FFF',
      },
      placeholderStyle: {
        'color': '#606060',
        'font-size': '28rpx',
      },
    },
  ]);
  const handleComfirm = async () => {
    if (!state.model.mobile) {
      sheep.$helper.toast('请输入手机号');
      return;
    }
    if (!state.model.code) {
      sheep.$helper.toast('验证码');
      return;
    }
    if (!state.model.captcha) {
      sheep.$helper.toast('请输入图片验证码');
      return;
    }
    if (!state.model.password) {
      sheep.$helper.toast('请输入密码');
      return;
    }
    if (!state.model.confirm_password) {
      sheep.$helper.toast('请再次输入密码');
      return;
    }
    if (state.model.password != state.model.confirm_password) {
      sheep.$helper.toast('两次密码不一致');
      return;
    }
    const { code } = await sheep.$api.user.resetPassword(state.model).then((res) => {
      if (code === 1) {
        sheep.$helper.toast('重置成功');
        sheep.$store('user').getInfo();
        state.showTips = true;
        sheep.$router.go('/pages/index/login');
      }
    });
  };

  function onClose() {
    state.showTips = false;
    sheep.$router.go('/pages/index/login');
  }
</script>

<style lang="scss" scoped>

  .lg-content {
    padding: 0 40rpx;

    .lg-content-t {
      position: relative;
      margin-top: -300rpx;

      .lg-content-t1 {

        font-weight: 300;
        font-size: 70rpx;
        color: #FFFFFF;
      }

      .lg-content-t2 {
        margin-top: 30rpx;

        font-weight: 300;
        font-size: 40rpx;
        color: #FFFFFF;
      }
    }

    .lg-content-form {

      .img-btn {
        width: 132rpx;
        height: 78rpx;
        border: 1px solid #ccc;

        image {
          width: inherit;
          height: inherit;
        }
      }

      .send-btn {

        font-weight: 300;
        font-size: 30rpx;
        color: #00A1FF;
      }

      .lg-content-form-title {
        text-align: center;

        font-weight: 400;
        font-size: 42rpx;
        color: #FFFFFF;
      }

      .lg-content-form-item {
        margin-top: 40rpx;

        .title {

          font-weight: 400;
          font-size: 28rpx;
          color: #FFFFFF;
          margin-bottom: 25rpx;
        }

        .lg-content-form-item-c {
          background: #1C1C1C;
          border-radius: 20rpx;
          padding: 15rpx 40rpx;
        }
      }

      .lg-content-form-enter {
        margin-top: 40rpx;

        font-weight: 300;
        font-size: 30rpx;
        color: #FFFFFF;
      }

      .lg-content-form-btn {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        background: linear-gradient(90deg, #45C9F0, #36F6AF);
        border-radius: 20rpx;

        font-weight: 500;
        font-size: 30rpx;
        color: #000000;
        margin-top: 60rpx;
      }

      .lg-content-form-read {
        margin-top: 40rpx;

        .cicle {
          width: 28rpx;
          height: 28rpx;
          border-radius: 50%;
          border: 2px solid #1DB481;
          margin-right: 10rpx;
        }

        .cicle-active {
          width: 16rpx;
          height: 16rpx;
          background: #1DB481;
          border-radius: 50%;
        }

        .text-active {
          color: #00A1FF;
        }


        font-weight: 400;
        font-size: 26rpx;
        color: #FFFFFF;
      }
    }
  }
</style>
